<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
<!--    引入vue的路由-->
    <script src="../js/vue-router.js"></script>
</head>
<body>
<!--
   vue中路由的基本使用
    1. 需要显示组件的渲染效果 需要在父组件中使用组件标签
        login   register
     根据用户的访问路径  来动态渲染组件效果       /register
   使用vue的中路由即可实现 根据用户的访问路径实现组件的动态渲染    /login      <login></login>

   路由的使用步骤：
     1.引入路由的js文件
     2.定义 (路由) 组件
     3.定义路由列表  routes
        每个路由应该映射一个组件   路径和组件的对应关系
     4.创建路由对象
     5.扩充vue的路由功能
     6.设置路由的出口   设置匹配的组件在那个位置渲染
-->
<div id="app">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<script>
    //登录组件
    let login = {
        template: `
             <div>
                    <h2>欢迎登录</h2>
                    <form action="#">
                        <p><input type="text" placeholder="请输入用户名"></p>
                        <p><input type="password" placeholder="请输入密码"></p>
                        <p><button>立即登录</button></p>
                    </form>
            </div>
        `
    }

    // 注册组件
    let register = {
        template: `
             <div>
                    <h2>欢迎注册</h2>
                    <form action="#">
                        <p><input type="text" placeholder="请输入用户名"></p>
                        <p><input type="password" placeholder="请输入密码"></p>
                        <p><button>立即注册</button></p>
                    </form>
            </div>
        `
    }

    let filenotfound = {
        template: `
             <div>
                    页面找不到！！！
            </div>
        `
    }


    // 3.定义路由列表
    const routes = [
        { path: '/',redirect:'/login'},
        // { path: '/', component: login},
        { path: '/login', component: login},
        { path: '/register', component: register },
        { path: '/**', component: filenotfound }
    ]

    // 4.创建路由对象   实现路径和组件的跳转
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })


    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components: {
            login, register,filenotfound
        },
        router   // 5.扩充vue的路由功能  从而让整个应用都有路由功能
    })

</script>
</body>
</html>